<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title>Contact</title>

    <!--CSS bundle -->
    <link rel="stylesheet" media="all" href="css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="css/animate.css" />
    <link rel="stylesheet" media="all" href="css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="css/theme.css" />

    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Rajdhani:400,600,700&amp;subset=latin-ext" rel="stylesheet">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div class="page-loader">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="wrapper">

        <div class="inc:_header.html"></div>

        <!-- ========================  Contact ======================== -->

        <section class="contact">

            <!-- === Goolge map === -->

            <div id="map"></div>

            <div class="container">

                <div class="row">

                    <div class="col-md-10 offset-md-1">

                        <div class="contact-block">

                            <div class="contact-info">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <figure class="text-center">
                                            <span class="icon icon-map-marker"></span>
                                            <figcaption>
                                                <strong>Where are we?</strong>
                                                <span>200 12th Ave, New York, <br />NY 10001, USA</span>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="col-sm-4">
                                        <figure class="text-center">
                                            <span class="icon icon-phone"></span>
                                            <figcaption>
                                                <strong>Call us</strong>
                                                <span>
                                                    <strong>T</strong> +1 222 333 4444 <br />
                                                    <strong>F</strong> +1 222 333 5555
                                                </span>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="col-sm-4">
                                        <figure class="text-center">
                                            <span class="icon icon-clock"></span>
                                            <figcaption>
                                                <strong>Working hours</strong>
                                                <span>
                                                    <strong>Mon</strong> - Sat: 10 am - 6 pm <br />
                                                    <strong>Sun</strong> 12pm - 2 pm
                                                </span>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>

                            <div class="contact-info">
                                <h2 class="title">Send an email</h2>
                                <p>
                                    Thanks for your interest in Mobel Theme. We believe in creativity as one of the major forces of progress.
                                    Please use this form if you have any questions about our products and we'll get back with you very soon.
                                </p>

                                <div class="contact-form-wrapper">

                                    <div class="contact-form clearfix">
                                        <form action="#" method="post">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <input type="text" value="" class="form-control" placeholder="Your name" required="required">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <input type="email" value="" class="form-control" placeholder="Your email" required="required">
                                                    </div>
                                                </div>

                                                <div class="col-md-12">

                                                    <div class="form-group">
                                                        <input type="text" value="" class="form-control" placeholder="Subject" required="required">
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control" placeholder="Your message" rows="10"></textarea>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 text-center">
                                                    <input type="submit" class="btn btn-primary" value="Send message" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        </div> <!--/contact-block-->
                    </div><!--col-sm-8-->
                </div> <!--/row-->
            </div><!--/container-->
        </section>

        <!-- ========================  Newsletter ======================== -->

        <section class="banner">

            <div class="container-fluid">

                <div class="banner-image" style="background-image:url(assets/images/gallery-1.jpg)">
                    <!--Header-->

                    <header>
                        <div class="container">

                            <h2 class="h2 title">Stay in touch!</h2>
                            <div class="text">
                                <p>Be first to know about all new interior features!</p>
                            </div>

                        </div>
                    </header>

                    <!--Content-->

                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <input type="email" class="form-control" name="name" value="" placeholder="Enter your e-mail">
                            </div>
                            <div class="col-md-4">
                                <a href="#" class="btn btn-clean">Subscribe now</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!--/container-fluid-->

        </section>

        <!-- ========================  Benefits ======================== -->

        <section class="benefits">

            <!--Header-->

            <header class="d-none">
                <div class="container">
                    <h2 class="h2 title">Benefits</h2>
                </div>
            </header>

            <!--Header-->

            <div class="container">

                <div class="row">

                    <!--Icon-->

                    <div class="col-6 col-lg-3" data-tilt>
                        <figure>
                            <div class="icon"><i class="icon icon-gift"></i></div>
                            <figcaption>
                                <span>
                                    <strong>Get your gift</strong> <br />
                                    <small>Are you a new customer?</small>
                                </span>
                            </figcaption>
                        </figure>
                    </div>

                    <!--Icon-->

                    <div class="col-6 col-lg-3" data-tilt>
                        <figure>
                            <div class="icon"><i class="icon icon-rocket"></i></div>
                            <figcaption>
                                <span>
                                    <strong>Fast delivery</strong> <br />
                                    <small>We're shipping all over the world</small>
                                </span>
                            </figcaption>
                        </figure>
                    </div>

                    <!--Icon-->

                    <div class="col-6 col-lg-3" data-tilt>
                        <figure>
                            <div class="icon"><i class="icon icon-history"></i></div>
                            <figcaption>
                                <span>
                                    <strong>Money-back guarantee</strong> <br />
                                    <small>30 day money back gurantee</small>
                                </span>
                            </figcaption>
                        </figure>
                    </div>

                    <!--Icon-->

                    <div class="col-6 col-lg-3" data-tilt>
                        <figure>
                            <div class="icon"><i class="icon icon-diamond"></i></div>
                            <figcaption>
                                <span>
                                    <strong>VIP discounts</strong> <br />
                                    <small>Become VIP member</small>
                                </span>
                            </figcaption>
                        </figure>
                    </div>
                </div> <!--/row-->

            </div> <!--/container-->

        </section>



        <div class="inc:_footer.html"></div>

    </div> <!--/wrapper-->
    <!--Scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/include.js"></script>
    <script src="js/ion.rangeSlider.js"></script>
    <script src="js/magnific-popup.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/tilt.jquery.js"></script>
    <script src="js/jquery.easypiechart.js"></script>
    <script src="js/bigtext.js"></script>
    <script src="js/main.js"></script>

    <script>
        function initMap() {
            var contentString =
                '<div class="map-info-window">' +
                '<p><img src="assets/images/divano-logo.png" alt="" width="150"></p>' +
                '<p><strong>Divano - Furniture Template</strong></p>' +
                '<p><i class="fa fa-map-marker"></i> 200 12th Ave, New York, NY 10001, USA</p>' +
                '<p><i class="fa fa-phone"></i> +12 33 444 555</p>' +
                '<p><i class="fa fa-clock-o"></i> 10am - 6pm</p>' +
                '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            //set default pposition
            var myLatLng = { lat: 40.7459772, lng: -74.0545504 };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: myLatLng,
                styles: [{ "featureType": "administrative", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -100 }, { "lightness": 20 }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -100 }, { "lightness": 40 }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "visibility": "on" }, { "saturation": -10 }, { "lightness": 30 }] }, { "featureType": "landscape.man_made", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "saturation": -60 }, { "lightness": 10 }] }, { "featureType": "landscape.natural", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "saturation": -60 }, { "lightness": 60 }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }, { "saturation": -100 }, { "lightness": 60 }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }, { "saturation": -100 }, { "lightness": 60 }] }]
            });
            //set marker
            var image = 'assets/images/map-icon.png';
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: "Hello World!",
                icon: image
            });
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAabaAL675kRhFvfrPEmjFUirXHk2cA9Dc&callback=initMap"></script>

</body>

</html>